<template>
  <div class="chengfruits">
    <div class="center">
      <div class="yyuan">
        <div class="yyleft">
          <p class="flower"><img src="../assets/flower.png" /></p>
          <div class="flcenter" v-for="(item, index) in fruit" :key="index">
            <p class="iii"><img :src="item.image" alt="" /></p>
            <ul>
              <h5>{{ item.title }}</h5>
              <li v-for="(item, index) in lists" :key="index">
                {{ item.txt }}
              </li>
            </ul>
          </div>
          <div class="flcenter" v-for="(item, index) in fruit2" :key="index">
            <p class="iii"><img :src="item.image" alt="" /></p>
            <ul>
              <h5>{{ item.title }}</h5>
              <li v-for="(item, index) in list2" :key="index">
                {{ item.txt }}
              </li>
            </ul>
          </div>
          <p class="flower"><img src="../assets/flower.png" /></p>
        </div>
        <div class="yyright">
          <div class="qfpublic">
            <p>热门搜索</p>
          </div>
          <div class="welfare">
            <div class="weimg"><img src="../assets/图层 15(1).png" /></div>
            <ul class="weltul">
              <li v-for="(item, index) in list" :key="index">
                <span class="span"></span>
                <router-link to="/" class="link">{{ item.txt }}</router-link>
              </li>
            </ul>
            <div class="more">
              <router-link to="Chengfruit" class="mlink">查看更多</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "chengfruits",
  components: {},
  data: function() {
    return {
      list: [
        { txt: "凤眼果怎么吃?它的这些营养..." },
        { txt: "专家推荐:用决明子泡茶最是..." },
        { txt: "常喝薄荷茶好处多多，用来..." },
        { txt: "经期能减肥吗?了解经期饮食..." },
        { txt: "凤眼果怎么吃?它的这些营养..." },
        { txt: "专家推荐:用决明子泡茶最是..." },
      ],
      fruit: [
        {
          image: require("../assets/fengyan.png"),
          title: "【凤眼果的好处】",
        },
      ],
      lists: [
        {
          txt:
            "睡眠不足是美容的天敌，人体在睡眠时各个器官会进行自我修复，皮肤也不例外。临床上使用阿胶治疗失眠的方法很多，如黄连阿胶汤、牛黄清心丸等。",
        },
        {
          txt:
            "坚持吃阿胶糕6个月，你会发现感冒的频率减少了，肤色也红润了，皮肤更有弹性了。",
        },
        {
          txt:
            "中医解说：人的皮肤成分主要是胶原蛋白，胶原蛋白的结构和质量影响着皮肤的外观。",
        },
        {
          txt:
            "阿胶含有大量的胶原蛋白组成，胶原蛋白小肽具有消除自由基的作用，维持皮肤弹性;阿胶还可以提高血清和肝脏SOD和GSH-Px的破坏，实现对造血系统的保护作用。",
        },
        {
          txt:
            "中医解说：阿胶为补血要药，擅长以内调外，改善造血系统，使整个机体得到濡养，并能有效抑制黑色素的生成，从而达到祛除色斑、改善皮肤不良状况的目的。",
        },
      ],
      fruit2: [
        {
          image: require("../assets/fengyan.png"),
          title: "【阿胶的禁忌人群】",
        },
      ],
      list2: [
        {
          txt:
            "阿胶糕由阿胶制成，而阿胶又是一味中药，所以，含有“中药”的阿胶糕便不适合所有人来服用。",
        },
        {
          txt: "1、体内湿邪重的人",
        },
        {
          txt:
            "可表现为口干口苦口黏、乏力、头晕或者头迷糊、肚子胀、大便不好，最重要的是舌苔厚腻，或者白或者黄。",
        },
        {
          txt: "2、体内有淤血的人",
        },
        {
          txt:
            "肤色晦黯，色素沉着，容易出现瘀斑，口唇黯淡，舌黯或有瘀点，舌下络脉紫黯或增粗，脉涩。",
        },
        {
          txt: "3、脾虚者",
        },
        {
          txt:
            "即消化功能低下的人，主要表现是食少，大便溏烂或先干后溏，倦怠乏力、面色萎黄等。脾虚者一定要吃则需要配伍理气消食药制约阿胶的滋腻之性方可。",
        },
      ],
    };
  },
};
</script>

<style scoped>
.chengfruits {
  width: 100%;
  padding: 1rem 0;
  background-color: #fce7d7;
}
.yyuan {
  width: 100%;
  padding-left: 3%;
  padding-bottom: 4rem;
  display: flex;
  justify-content: space-between;
}
.yyuan .yyleft {
  width: 65%;
  /* border: 1px solid #f00; */
}
.yyuan .yyright {
  width: 25%;
  margin-top: 3rem;
}
.flower {
  width: 96%;
  margin: 0 auto;
}
.flower img {
  display: block;
  width: 100%;
}
.flcenter {
  position: relative;
  width: 65%;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.flcenter .iii {
  width: 70%;
  /* border: 1px solid #f00; */
  margin: 1rem auto;
  padding-bottom: 1rem;
}
.flcenter .iii img {
  display: block;
  width: 100%;
}
.flcenter ul h5 {
  color: #a40000;
  font-size: 20px;
  line-height: 30px;
  padding-bottom: 30px;
}
.flcenter ul li {
  margin-left: 5%;
  line-height: 30px;
  font-size: 18px;
  text-indent: 2rem;
  color: #444241;
}
.qfpublic {
  width: 450px;
}
.qfpublic p {
  color: #a70b0a;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 30px;
}
.welfare {
  width: 100%;
}
.welfare .weimg {
  width: 92%;
}
.weimg img {
  display: block;
  width: 100%;
}
.weltul {
  margin-top: 2rem;
}
.weltul .link {
  font-size: 18px;
  color: #666666;
}
.weltul li {
  margin-top: 15px;
  display: flex;
  align-items: center;
  height: 30px;
  color: #757371;
}
.weltul li .link:hover {
  color: #a40000;
  font-size: 22px;
  font-weight: 600;
}
.span {
  width: 18px;
  height: 18px;
  background-color: #a40000;
  border-radius: 9px;
  margin: 0 10px;
}
.more {
  background-color: #a40100;
  white-space: nowrap;
  border-radius: 25px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  width: 114px;
  padding: 10px 0;
  margin-top: 20px;
  float: right;
  margin-right: 8%;
}
.mlink {
  color: white;
}
/* 右边 */
.content_right {
  width: 846px;
  margin: 0 auto;
}
.content_right_title {
  display: flex;
  justify-content: space-between;
}
.right_title_div {
  width: 100%;
  display: flex;
  justify-content: left;
  margin-bottom: 30px;
}
.right_title_div div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-left: 10px;
}
.content_right_div {
  height: 132px;
  width: 832px;
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}
.content_right_option {
  display: flex;
  flex-direction: row;
  padding: 5px 10px;
  border: 3px #882e13 solid;
  border-radius: 10px;
  width: 800px;
  transition: all 0.1s;
  position: absolute;
  right: 0;
  /* margin-top: 1rem; */
}
.right_time {
  display: flex;
  flex-direction: column;
  width: 200px;
  margin-right: 40px;
  text-align: center;
  /* background-color: #d06464; */
  color: white;
  font-size: 20px;
  padding: 10px 0;
}
.content_right_option:hover {
  width: 846px;
  height: 140px;
}
.new_title {
  font-size: 20px;
  font-weight: 600;
  color: #ac0001;
  margin-top: 20px;
}
.new_details {
  color: gray;
  margin-top: 10px;
}
.content_right_option:hover .right_time {
  width: 250px;
  background: url("../assets/doctor.png") no-repeat;
  /* background-color: #9e290b; */
}
.content_right_option:hover .new_title {
  font-size: 23px;
}
.content_right_option:hover .new_details {
  font-size: 18px;
}
</style>
